<template>
    <div>
        <div class="top-container clearfix">
            <div class="top clearfix">
                <div class="btns">
                    <el-button v-for="(level, index) in levelList"
                               :key="level.name"
                               @click="switchLevel(index)"
                               :class="{'active': level.active}">
                    <span v-if="level.name !== '未评级'">
                        {{level.name}}类({{level.total}})
                    </span>
                        <span v-if="level.name === '未评级'">
                        {{$route.params.subject}}-{{level.name}}({{unleveledTotal}})
                    </span>
                    </el-button>
                </div>
                <div class="right" v-if="!leveled">
                    <el-button @click="jumpToMarkingAreaPage('first')">快速评级</el-button>
                </div>
            </div>
            <div class="left" v-if="leveled">
                <span class="text-btn success">已评分（{{dealCount}}）份</span>
                <span class="text-btn primary">未评分（{{undealCount}}）份</span>
            </div>
        </div>
        <div class="paper-list-container">
            <div class="empty-tip" v-if="!this.paperList.length">
                <div class="center">
                    <span class="icon el-icon-warning-outline"></span>
                    <div>查询不到该评级下的试卷...</div>
                </div>
            </div>
            <ul class="paper-list clearfix" v-if="this.paperList.length">
                <li class="paper-container" v-for="(paper, index) in paperList" :key="paper.id">
                    <div class="paper">
                        <el-button class="edit-level"
                                   v-if="leveled"
                                   @click="jumpToMarkingAreaPage(paper.id)">修改评级
                        </el-button>
                        <el-image style="width: 250px; height: 300px;" :src="paper.url" :alt="paper.name" fit="cover">
                        </el-image>
                        <div class="image-mark-text" v-if="paper.level">
                            <el-input-number
                                    v-if="paper.show"
                                    v-model="paper.mark"
                                    controls-position="right"
                                    @keyup.enter="hideMarkArea(paper.id, index)"
                                    @blur="hideMarkArea(paper.id, index)"
                                    :min="0"
                                    :max="100"></el-input-number>
                            <div @click="showMarkArea(index)"
                                 v-if="!paper.show">
                                <span class="el-icon-edit-outline"></span>
                                点击进行打分
                            </div>
                        </div>
                    </div>
                    <div class="id-number" :class="{'no-border-radius': leveled}">
                        <span>准考证号：</span>
                        <span>{{paper.permission || '--'}}</span>
                    </div>
                    <div class="rate-and-mark clearfix" v-if="leveled">
                        <div class="level">
                            <span class="label">评级</span>
                            <span class="val level-val">{{paper.level || '--'}}</span>
                        </div>
                        <div class="mark">
                            <span class="label">分数</span>
                            <span class="val mark-val" :class="{'good': parseInt(paper.mark) > 0}">{{paper.mark || '--'}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {basicRequest} from "../../utils/request";

    export default {
        name: "paperManage",
        props: {
            markedCount: {
                type: Number,
                default: 0
            },
            unmarkedCount: {
                type: Number,
                default: 0
            },
        },
        computed: {
            activeLevel() {
                let activeLevel = ''
                this.levelList.forEach(level => {
                    if (level.active) {
                        activeLevel = level
                    }
                })
                return activeLevel.name
            },
            leveled() {
                return this.activeLevel !== '未评级'
            }
        },
        data: () => {
            return {
                unleveledTotal: 0,
                undealCount: 0,
                dealCount: 0,
                levelList: [],
                classList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
                paperList: [
                    {
                        name: '',
                        url: '',
                        id: '',
                        level: '',
                        show: false,
                        mark: ''
                    }
                ]
            }
        },
        methods: {
            queryPaperList({status, grade}) {
                this.paperList = []
                // status = 1 未评级，status= 0 未评分
                const data = {
                    province: this.$route.params.province,
                    course: this.$route.params.subject,
                    current: 1,
                    size: 99999
                }
                if (status === 0 || status === 1) {
                    data.status = status
                }
                if (grade) {
                    data.grade = grade
                }
                basicRequest({
                    method: 'post',
                    url: '/paper/query',
                    data: data
                }).then(data => {
                    // console.log(data)
                    if (status === 1) {
                        this.unleveledTotal = data.total
                    }
                    if (data.records && data.records.length) {
                        const list = []
                        data.records.forEach(paperInfo => {
                            list.push({
                                id: paperInfo.id,
                                name: paperInfo.admissionTicketCode,
                                url: paperInfo.img,
                                permission: paperInfo.admissionTicketCode,
                                level: paperInfo.grade,
                                show: false,
                                mark: paperInfo.score
                            })
                        })
                        this.paperList = list
                        console.log(list)
                    }
                    if (status !== 1 && grade) {
                        this.queryDealedCount(grade)
                    }
                }, error => {
                    console.log(error)
                })
            },
            queryDealedCount(grade) {
                basicRequest({
                    method: 'get',
                    url: '/paper/agg',
                    params: {
                        grade
                    }
                }).then(data => {
                    this.undealCount = data.count
                    this.dealCount = data.dealCount
                })
            },
            queryLevelList() {
                basicRequest({
                    method: 'get',
                    url: '/paper/grade'
                }).then(data => {
                    const list = []
                    const letters = this.classList
                    list.push({
                        name: '未评级',
                        count: Math.round(Math.random() * 2000),
                        active: true
                    })
                    for (let i = 0; i < data.length; i++) {
                        list.push({
                            name: data[i].name,
                            count: data[i].count,
                            total: data[i].total,
                            active: false
                        })
                    }
                    list[0].active = true
                    this.levelList = [].concat(list)
                }, error => {
                    console.log(error)
                })
            },
            updatePaper({paperId, grade, score}) {
                return new Promise((resolve, reject) => {
                    const data = {}
                    let tipStr = ''
                    if (grade) {
                        data.grade = grade
                        tipStr = '评级'
                    }
                    if (score) {
                        data.score = score
                        tipStr = '分数'
                    }
                    data.paperId = paperId
                    basicRequest({
                        method: 'post',
                        url: '/paper/update',
                        data: data
                    }).then(data => {
                        resolve()
                        this.$message.success(`试卷${tipStr}更新成功！`)
                        if (grade) {
                            this.queryPaperList({grade})
                        }
                    }, error => {
                        reject()
                        console.log(error)
                    })
                })
            },
            switchLevel(index) {
                this.levelList.forEach(level => {
                    level.active = false
                })
                this.levelList[index].active = true
                if (this.levelList[index].name === '未评级') {
                    this.queryPaperList({status: 1})
                } else {
                    this.queryPaperList({grade: this.levelList[index].name})
                }
            },
            showMarkArea(index) {
                this.paperList.forEach(paperInfo => {
                    paperInfo.show = false
                })
                this.paperList[index].show = !this.paperList[index].show
                console.log(index, this.paperList[index].show)
            },
            hideMarkArea(paperId, index) {
                this.updatePaper({
                    paperId,
                    score: this.paperList[index].mark
                }).then(() => {
                    this.paperList[index].show = !this.paperList[index].show
                })
            },
            jumpToMarkingAreaPage(start) {
                if (this.paperList && this.paperList.length) {
                    let startId = start
                    if (start === 'first') {
                        startId = this.paperList[0].id
                    }
                    this.$router.push(`/markingArea/${this.$route.params.province}/${this.$route.params.subject}/${this.activeLevel}/${typeof startId !== 'object' ? startId : -1}`)
                }
            }
        },
        created() {
            this.queryPaperList({status: 1})
            this.queryLevelList()
        }
    }
</script>

<style lang="scss">
    .paper-list-container {
        .el-input__inner {
            height: 30px;
        }

        .el-input-number {
            width: 200px;
            height: 30px;
            line-height: 30px;
        }

        .el-input-number.is-controls-right .el-input-number__decrease,
        .el-input-number.is-controls-right .el-input-number__increase {
            height: 14px;
            line-height: 14px;
            width: 30px;
        }

    }

</style>
<style scoped lang="scss">
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .top {
        margin-top: 10px;
        display: flex;
        .btns {
            .el-button {
                margin-left: 0;
                margin-right: 20px;
                margin-bottom: 20px;
                width: 110px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                padding: 0;

                &.active {
                    background-color: #204BD6;
                    color: #fff;
                }
            }
        }
        .right {
            float: right;

            button {
                color: #fff;
                background-color: #204BD6;
                padding: 10px 30px;
                border-radius: 10px;
            }
        }
    }


    .left {
        float: left;
        height: 40px;
        line-height: 40px;
        .text-btn {
            padding: 10px 24px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            color: #fff;
            margin-right: 24px;

            &.success {
                background-color: #59BF99;
            }

            &.primary {
                background-color: #204BD6;
            }
        }
    }

    .paper-list-container {
        background-color: #fff;
        border-radius: 10px;

        .empty-tip {
            width: 100%;
            height: 300px;
            text-align: center;
            line-height: 300px;

            .center {
                display: inline-block;
                line-height: normal;
                font-size: 20px;
            }

            .icon {
                font-size: 50px;
                line-height: normal;
            }

        }

        .paper-list {
            padding: 0;

            .paper-container {
                float: left;
                margin-bottom: 20px;
                margin-right: 10px;
                border-radius: 10px;
                overflow: hidden;

                .paper {
                    position: relative;

                    .edit-level {
                        position: absolute;
                        top: 0;
                        right: 0;
                        z-index: 1;
                        color: #fff;
                        background-color: #35CE96;
                        -webkit-border-radius: 0 10px 0;
                        -moz-border-radius: 0 10px 0;
                        border-radius: 0 10px 0;
                        outline: none;
                    }

                    .image-mark-text {
                        background-color: rgba(0, 0, 0, .5);
                        color: #fff;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        cursor: pointer;
                    }

                    .el-image {
                        vertical-align: middle;
                    }
                }

                .id-number {
                    text-align: center;
                    border: 1px solid #CACCD4;
                    height: 54px;
                    line-height: 54px;
                    -webkit-border-radius: 0 0 10px 10px;
                    -moz-border-radius: 0 0 10px 10px;
                    border-radius: 0 0 10px 10px;
                    padding: 0 12px;
                    color: #1B1B1B;
                    font-weight: bold;

                    &.no-border-radius {
                        -webkit-border-radius: 0;
                        -moz-border-radius: 0;
                        border-radius: 0;
                    }
                }

                .rate-and-mark {
                    border: 1px solid #CACCD4;
                    border-top: none;
                    -webkit-border-radius: 0 0 10px 10px;
                    -moz-border-radius: 0 0 10px 10px;
                    border-radius: 0 0 10px 10px;
                    font-size: 20px;
                    padding: 0 12px;
                    height: 54px;
                    line-height: 54px;

                    span {
                        display: inline-block;
                        vertical-align: middle;
                    }

                    .mark {
                        float: right;
                    }

                    .level {
                        float: left;
                    }

                    .val {
                        font-weight: bold;
                    }

                    .mark-val {
                        font-size: 40px;
                        color: #CACCD4;
                        vertical-align: top;
                        &.good {
                            color: #EC2D56;
                        }
                    }
                }
            }
        }

    }
</style>